<template>
	<view class="transverse">
		<view v-for="(item,index) in optionList" :key="index" @click="selectChange(item.optionId)" class="u-f-ac margin-lr" style="width: 25%;justify-content: flex-start;">
      <view class="radio" :class="[value===item.optionId?'check-border':'',$attrs.answer==item.optionId?'wrong-border':'',$attrs.answer&&item.optionRight?'right-border':'']">
        <view class="circle"></view>
      </view>
      <view class="">
        <jyf-parser :html="item.optionText" ref="article" v-if="item.optionText"></jyf-parser>
        <image :src="item.imageUrl" v-if="item.imageUrl" mode="aspectFit"></image>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
    props:{
    optionList:{
      type:Array,
      default:[]
    },
      // 是否启用点击状态
      disabled:{
        type:Boolean,
        default:false
      },
      value:String
    },
		data() {
			return {
				
			};
		},
    created() {
       // console.log(this.$attrs,(this.$attrs.answer&&this.$attrs.right)=="A")
    },
    methods:{
      selectChange(e){
        if(!this.disabled){
         this.$emit('selectChange',e)
        }
        
      }
    }
	}
</script>

<style lang="scss">
.transverse{
  @include transverse
}

  .wrong-border{
    border:1px solid #F55555 !important;
    .circle{
      background-color: #F55555;
    }
  }
</style>
